Feature · mcp-skills
MCP and skills
Blutui Context: a Courier MCP server and agent skills that teach any AI assistant to build Blutui projects properly.
Agent run
once one pass, holds
One prompt shown as the trail it leaves: the skill loads, three MCP calls land and a layout is written, each step pending then ticking citron. The feature as a receipt.
views/components/visuals/mcp-skills/v1.html
Static · three placements
Add a team page backed by a collection.
Add a team page backed by a collection.
Add a team page backed by a collection.
Animated · once
Add a team page backed by a collection.
With and without
once one pass, holds
The same task answered twice. A generic assistant posts a raw form to nowhere; with Blutui Context it writes the form tag. Both type in, then the left is hatched out and the right gets its rule.
views/components/visuals/mcp-skills/v2.html
Static · three placements
Any assistant
<form action="/api/contact">
<input name="email">
<input name="message">
<button>Send</button>
</form>
Posts to nowhere · no spam scan
With Blutui Context
{% form 'contact' %}
{% for field in form.fields %}
{{ ui.field(field) }}
{% endfor %}
{% endform %}
Submissions in the console · AI scan on
Any assistant
<form action="/api/contact">
<input name="email">
<input name="message">
<button>Send</button>
</form>
Posts to nowhere · no spam scan
With Blutui Context
{% form 'contact' %}
{% for field in form.fields %}
{{ ui.field(field) }}
{% endfor %}
{% endform %}
Submissions in the console · AI scan on
Any assistant
<form action="/api/contact">
<input name="email">
<input name="message">
<button>Send</button>
</form>
Posts to nowhere · no spam scan
With Blutui Context
{% form 'contact' %}
{% for field in form.fields %}
{{ ui.field(field) }}
{% endfor %}
{% endform %}
Submissions in the console · AI scan on
Animated · once
Any assistant
<form action="/api/contact">
<input name="email">
<input name="message">
<button>Send</button>
</form>
Posts to nowhere · no spam scan
With Blutui Context
{% form 'contact' %}
{% for field in form.fields %}
{{ ui.field(field) }}
{% endfor %}
{% endform %}
Submissions in the console · AI scan on
Allow the tool call
cutoutonce one pass, holds
Cutout on a citron ground: an assistant panel in an editor, cropped so the editor runs off the left and the window off the bottom. The skill has loaded its rules and the assistant asks to run create_collection; the cursor arrives on Allow and presses, the collection lands and the Canvas loop types itself into team.html beside it. At card width the editor is cropped away and the panel fills the frame.
views/components/visuals/mcp-skills/c1.html
Static · three placements
{% extends 'templates/default.html' %}
{% set team = cms.collection('team') %}
{% block body %}
<section class="mx-auto max-w-5xl px-6 py-20">
<h1>The team</h1>
<div class="mt-12 grid gap-10 @3xl:grid-cols-3">
{% for person in team %}
<article>
<p>{{ person.name }}</p>
<p>{{ person.role }}</p>
</article>
{% endfor %}
</div>
</section>
{% endblock %}
Add a team page backed by a collection.
create_collection
handle: "team"
fields: name, role, photo, email
The page renders the collection with a Canvas loop, the way the Blutui rules ask for it.
{% extends 'templates/default.html' %}
{% set team = cms.collection('team') %}
{% block body %}
<section class="mx-auto max-w-5xl px-6 py-20">
<h1>The team</h1>
<div class="mt-12 grid gap-10 @3xl:grid-cols-3">
{% for person in team %}
<article>
<p>{{ person.name }}</p>
<p>{{ person.role }}</p>
</article>
{% endfor %}
</div>
</section>
{% endblock %}
Add a team page backed by a collection.
create_collection
handle: "team"
fields: name, role, photo, email
The page renders the collection with a Canvas loop, the way the Blutui rules ask for it.
{% extends 'templates/default.html' %}
{% set team = cms.collection('team') %}
{% block body %}
<section class="mx-auto max-w-5xl px-6 py-20">
<h1>The team</h1>
<div class="mt-12 grid gap-10 @3xl:grid-cols-3">
{% for person in team %}
<article>
<p>{{ person.name }}</p>
<p>{{ person.role }}</p>
</article>
{% endfor %}
</div>
</section>
{% endblock %}
Add a team page backed by a collection.
create_collection
handle: "team"
fields: name, role, photo, email
The page renders the collection with a Canvas loop, the way the Blutui rules ask for it.
Animated · once
{% extends 'templates/default.html' %}
{% set team = cms.collection('team') %}
{% block body %}
<section class="mx-auto max-w-5xl px-6 py-20">
<h1>The team</h1>
<div class="mt-12 grid gap-10 @3xl:grid-cols-3">
{% for person in team %}
<article>
<p>{{ person.name }}</p>
<p>{{ person.role }}</p>
</article>
{% endfor %}
</div>
</section>
{% endblock %}
Add a team page backed by a collection.
create_collection
handle: "team"
fields: name, role, photo, email
The page renders the collection with a Canvas loop, the way the Blutui rules ask for it.
Overrides none — the file's own defaults
Prompt to prototype
conceptonce one pass, holds
Concept on a citron ground: the prompt in an assistant panel, Blutui Context drawn on the ground as a dashed frame holding its two skills and three MCP tools, and the prototype it builds on localhost:8080/spring. The prompt types in, a wire carries it into Context, the skills and tools tick in order, the prototype opens and its parts land one by one, each wired back to the tool that made it (the canopy blocks skill to the hero, create_collection to the products, create_form to the enquiry form) and labelled as the Canopy editor labels blocks. At card width the prototype and its wires fill the frame. The same Weka page runs on into design-handoff.
views/components/visuals/mcp-skills/k1.html
Static · three placements
Prototype a spring landing page for Weka, with products and an enquiry form.
Working with Blutui Context…
Prototype ready at localhost:8080/spring
Ask anything…
Any AI assistant
Blutui Context
Skills
MCP
Spring range
Shop nowNew this season
Ask us anything
Prototype a spring landing page for Weka, with products and an enquiry form.
Working with Blutui Context…
Prototype ready at localhost:8080/spring
Ask anything…
Any AI assistant
Blutui Context
Skills
MCP
Spring range
Shop nowNew this season
Ask us anything
Prototype a spring landing page for Weka, with products and an enquiry form.
Working with Blutui Context…
Prototype ready at localhost:8080/spring
Ask anything…
Any AI assistant
Blutui Context
Skills
MCP
Spring range
Shop nowNew this season
Ask us anything
Animated · once
Prototype a spring landing page for Weka, with products and an enquiry form.
Working with Blutui Context…
Prototype ready at localhost:8080/spring
Ask anything…
Any AI assistant
Blutui Context
Skills
MCP
Spring range
Shop nowNew this season
Ask us anything
Overrides none — the file's own defaults